The Current State of HTML5 Forms

Let's explore the different features of HTML5 forms.

The introduction

HTML5 is the newest specification for HTML, the language that web browsers read to display web pages. HTML5 has many new features intended to make creating websites easier and people’s experience in using those websites better. Among those features are many enhancements to web forms.

Support for HTML5 web form features is improving, but not all web browsers support HTML5 features the same way. This page is intended to explore those new new features and help you understand which browsers are supporting which features and to what degree. As a whole, this represents the current state of HTML5 forms. But, even if you still need to support older browsers which don’t support all the new features, realize HTML5 Web Forms are an enhancement: you can use all the new attribute and input types, and your form will still work in archaic browsers.

The charts below list the most current version of each major browser. The individual pages (e.g. page for placeholder) shows past browser support.

Browser Support for New HTML5 Input Types

 
Firefox
Safari
Safari
Chrome
Opera
IE
Android
Email4+5+3.1+6+/10+10.6+10+4+
Tel4+5+3.1+6+10.6+10+2.3+
Url4+5+3.1+6+/10+10.6+10+2.3+
Search4+5+4+6+10.6+9/10+4+
Color29+8+8-20+11+11-4.4+
Number29+5+3.2+7+9+10+2.3+
Range23+4+5+6+11+10+4.2+
Date32-7-5+20+9+11+4.4+
TextAllAllAllAllAllAllAll
ButtonAllAllAllAllAllAllAll
HiddenAllAllAllAllAllAllAll
PasswordAllAllAllAllAllAllAll
CheckboxAllAllAllAllAllAllAll
RadioAllAllAllAllAllAllAll
FileAllAllAllAllAllAllAll
SubmitAllAllAllAllAllAllAll
ResetAllAllAllAllAllAllAll

All the new input types are supported in all browsers in that they will submit their data as if it were a “text” input. These valuations are based on if they do anything above and beyond and/or validate against the type of data relevant to them.

Browser Support for New HTML5 Input Attributes

 
Firefox
Safari
Safari
Chrome
Opera
IE
Android
Placeholder4+4+4+10+11.10+10+2.3+
Autofocus4+5+5-6+11+10+3+
Maxlength4.4+5+4+6+11+9+/102.3+
List (Datalist)4+7-7-20+9+10+4.3-
Autocomplete4+5.2+6+14+10.6+11+4.4+
Required6+5+4+6+10.6+10+2.3+
Pattern4+5+4+10+11+10+2.3+
Spellcheck3.6+4+7+10+11+10+4.3-
Novalidate4+7-7-10+10+10+4.2-
Formnovalidate4+7-7-6+10.6+10+4.2-
Formaction4+5.2+5+10+10.6+10+4.0+
Formmethod4+5.2+5+10+10.6+10+4.0+
Formtarget4+5.2+5+10+10.6+10+4.0+
Formenctype4+5.2+5+10+10.6+10+4.0+
minlength28-7-7-33-20-11-4.4-
readonlyAllAllAllAllAllAllAll
disabledAllAllAllAllAllAllAll
sizeAllAllAllAllAllAllAll
nameAllAllAllAllAllAllAll
height, width & sourceAllAllAllAllAllAllAll
checkedAllAllAllAllAllAllAll
tabindexAllAllAllAllAllAllAll
form4+5.1+5+10+9.5+11+4.0+
inputmodeFF OS7-7-34-20-10-4.4-
dirname29-6+6+16+10.6+11-4.4+
Accept11+5.2+7+10+10.6+10+4.2-
Multiple3.6+5+7+6+11+10+4.7+
Min / Max / Step16+5+3.26+10.610+4+

Browser Support for New HTML5 Form Elements

 
Firefox
Safari
Safari
Chrome
Opera
IE
Android
Meter16+5.2+8-8+11+11-4.4+
Progress6+5.2+7+6+10.6+10+4.4+
Output4+5.1+5+10+11+10+2.3+
Keygen3.6+4+7-6+10.6+11-2.3+
Datalist4+8-8-20+9+10+4.4+
OptionAllAllAllAllAllAllAll
LabelAllAllAllAllAllAllAll

JavaScript and HTML5 Forms

Testing for Support

If you intended to write JavaScript to mimic the functionality of HTML5 forms, you may want to first test the current browsers capability and write the JavaScript as a fallback. Below is how you might test for attribute support. More accurate feature testing can be done through the excellent JavaScript library Modernizr.

// Function to test for attribute support
	function elSupportsAttr(el, attr) {
	  return attr in document.createElement(el);
	} 

// Usage
	if (!elSupportsAttr("textarea", "placeholder")) {
	  // your custom fallback
	}

Custom Validity Messages

You can override default validity error messages through JavaScript

var emailField = document.getElementById("emailField");
	emailField.setCustomValidity("testing");

More JavaScript Fun

HTML5 has a number of useful JavaScript methods for manipulating forms.

// increase value by n
	input.stepUp(n) 
	// decrease value by n
	input.stepDown(n)
	// return value as number instead of string
	input.valueAsNumber 
	// return value in date format instead of string
	input.valueAsDate

CSS and HTML5 Forms

Pseudo classes

CSS3 has a number of new pseudo classes that can select form elements that are in particular states.

The :not() selector isn’t specific to forms, but is useful for selectors like :not([type=submit]) for selecting all inputs other than submit buttons.

The :valid pseudo selector will select the legend element of a fieldset that contains a valid input in Safari 5.

:required { }
:optional { }
:valid { }
:invalid { }
:default { }
:in-range { }
:out-of-range { }

:not()

Attribute selectors

Attribute selectors help select elements that contain specific attributes. Since HTML5 forms have many new input attributes, this can be useful in targeting them.

[autofocus] { }
[autocomplete] { }
[list] { }
[placeholder] { }
[type=range] { /* and other types */ }
[multiple]

Vendor Specific Stylings

There are a few visual aspects of HTML5 forms that may not be obvious how to style with CSS. For instance placeholder text, or how to fight against the default WebKit styling of a search for. A few snips of that nature to the right.

::-webkit-input-placeholder {
  /* Style placeholder text */
}
:-moz-placeholder  {
  /* Style placeholder text */
}
[type=search] {
  -webkit-appearance: none;
}
::-webkit-validation-bubble-message {
     padding: 50px;
}